<template>
<view class="load" v-if="!load">
      <u-loading-icon
        mode="circle"
        inactive-color="#fff"
        text="正在加载..."
        vertical
      ></u-loading-icon>
    </view>
	<view v-else class="trends" @click="closeinp">
		<view class="page_top2" :style="{
			background:  '#fff',
			'z-index': 199,
		}">
			<top-status></top-status>
			<view class="tabsBack">
				<view @click="goBack()" class="blackbox">
					<uni-icons :color="'black'" type="left" size="30"></uni-icons>
				</view>
				<image class="tabimg" :src="item.HeadImgUrl" mode="aspectFill" @click="nav_to(`/pages/user/user_visitor?id=${item.UserID}`)"></image>
				<view class="topTitle hiddenText" @click="nav_to(`/pages/user/user_visitor?id=${item.UserID}`)">
					{{ item.Name ? $util.entitiesToUtf16(item.Name) : '' }}
				</view>
				<view class="vipcon" v-if="item.UserType!='普通用户'">
					<image v-if="item.UserType=='体验会员'" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643203782247.png" mode="heightFix"></image>
					
					<image v-if="item.UserType=='金卡会员' || item.UserType=='月卡会员'" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17364151551701239.png" mode="heightFix"></image>
					<image v-if="item.UserType=='年卡会员'" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643305959214.png" mode="heightFix"></image>
				</view>
			</view>
		</view>
		<view style="height:190rpx;"></view>
		<view class="list" v-if="item">
			<view class="item_bd wap">
				<view class="container" v-if="item.IsVideo === 0 ">
					<swiper class="swiper" :autoplay="true" circular>
						<swiper-item v-for="(value,index) in JSON.parse(item.Images)" :key="index">
						<view class="bannerImageBox" @click="swiperlookimg(item.Images,index)">
							<image class="adverimg" :src="value" mode="aspectFill"></image>
						</view>
						</swiper-item>
					</swiper>
				</view>
			<!-- <view class="mt20" @click.stop="''" v-if="item.IsVideo === 0 ">
						<view class="one" @click.stop="lookimg(item.Images)" v-if="JSON.parse(item.Images).length == 1">
							<image class="simg" :src="JSON.parse(item.Images)[0]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="widthFix"
								@click.stop="lookimg(item.Images,0)" />
						</view>
						<view class="two" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 2">
							<view class="two-one" @click.stop="lookimg(item.Images,0)">
								<image class="simg" :src="JSON.parse(item.Images)[0]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
							</view>
							<view class="two-two">
								<image class="simg" :src="JSON.parse(item.Images)[1]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill"
									@click.stop="lookimg(item.Images,1)" />
							</view>
						</view>
						<view class="three" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 3">
							<view class="three-one" @click.stop="lookimg(item.Images,0)">
								<image class="simg" :src="JSON.parse(item.Images)[0]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
							</view>
							<view class="three-two">
								<image class="simg" :src="JSON.parse(item.Images)[1]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill"
									@click.stop="lookimg(item.Images,1)" />
								<image class="simg" :src="JSON.parse(item.Images)[2]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill"
									@click.stop="lookimg(item.Images,2)" />
							</view>
						</view>
						<view class="four" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 4">
							<view class="four-one">
								<view class="four-one-one" @click.stop="lookimg(item.Images,0)">
									<image class="simg" :src="JSON.parse(item.Images)[0]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
								</view>
								<view class="four-one-two" @click.stop="lookimg(item.Images,1)">
									<image class="simg" :src="JSON.parse(item.Images)[1]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
								</view>
							</view>
							<view class="four-two">
								<view class="four-two-one" @click.stop="lookimg(item.Images,2)">
									<image class="simg" :src="JSON.parse(item.Images)[2]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
								</view>
								<view class="four-two-two" @click.stop="lookimg(item.Images,3)">
									<image class="simg" :src="JSON.parse(item.Images)[3]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
								</view>
							</view>
						</view>
						<view class="five" v-else>
							<view class="five-one" v-for="(imgs,index) in JSON.parse(item.Images)" :key="index">
								<image @click.stop="lookimg(item.Images,index)" :src="imgs+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
							</view>
						</view>
			</view> -->
			<view class="video_box" v-else @click.stop="">
				<video :src="JSON.parse(item.Images)[0]"
					:poster="JSON.parse(item.Images)[0]+'?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'"></video>
			</view>
			<view class="fecont">
				{{$util.entitiesToUtf16(item.Content)}}
			</view>
			</view>
			<view class="tipsID" v-if="item.XHSID" @click="lookID()">
				{{ '也可以通过小红书：'+item.XHSID+'联系我'}}
				<!-- <text style="color: #008dd4;">查看</text> -->
			</view>
			<view class="fetime">{{$util.unixDatetime(item.CreateTime,'mm-dd')+' '+$util.unixDatetime(item.CreateTime,'hh-min')}}</view>
			<view class="item">
				<view class="sumping">{{'共'+item.CommunityComments.length+'条评论'}}</view>
				<!-- <view class="item_hd wap">
					<view class="left" @click="nav_to(`/pages/user/user_visitor?id=${user.UserID}`)">
						<image class="cover" :src="user.HeadImgUrl" mode="aspectFill" />
					</view>
					<view class="myinput" @click.stop="tocommit(item.ID,0)">{{'说点什么...'}}</view>
				</view> -->


				<view class="all-list" v-if="item.CommunityComments.length > 0">
					<view class="review-talk" v-for="(value,index) in item.CommunityComments" :key="index">
						<view class="retabox">
						<image class="rehd" :src="value.HeadImgUrl" mode="aspectFill" @click="nav_to(`/pages/user/user_visitor?id=${value.UserID}`)"></image>
						<view class="rebox" @click.stop="comment_edit(0,index,value)">
							<view class="renameBox">
								<view class="rename">{{ $util.entitiesToUtf16(value.Name)}}</view>
								<view class="vipcon" v-if="value.UserType!='普通用户'">
									<image v-if="value.UserType=='体验会员'" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643203782247.png" mode="heightFix"></image>
									
									<image v-if="value.UserType=='金卡会员' || value.UserType=='月卡会员'" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17364151551701239.png" mode="heightFix"></image>
									<image v-if="value.UserType=='年卡会员'" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643305959214.png" mode="heightFix"></image>
								</view>
							</view>
							<view class="recontenbox">
								<text class="reconten">{{$util.entitiesToUtf16(value.Content)}}</text>
								<text class="retime">{{$util.unixDatetime(value.CreateTime,'mm-dd')+' 回复'}}</text>
							</view>
						</view>
						</view>
						<block v-if="value.ReplyList && value.ReplyList.length > 0">
							<view class="repbox" v-for="(re_item,re_index) in value.ReplyList" :key="re_index">
								<image class="rehd" :src="re_item.HeadImgUrl" mode="aspectFill" @click="nav_to(`/pages/user/user_visitor?id=${re_item.UserID}`)"></image>
								<view class="rebox2">
									<view class="renameBox">
										<view class="rename">{{ $util.entitiesToUtf16(re_item.Name)}}</view>
										<view class="vipcon" v-if="re_item.UserType!='普通用户'">
											<image v-if="re_item.UserType=='体验会员'" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643203782247.png" mode="heightFix"></image>
											
											<image v-if="re_item.UserType=='金卡会员' || re_item.UserType=='月卡会员'" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17364151551701239.png" mode="heightFix"></image>
											<image v-if="re_item.UserType=='年卡会员'" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643305959214.png" mode="heightFix"></image>
										</view>
									</view>
									<view class="recontenbox">
										<text class="reconten">{{$util.entitiesToUtf16(re_item.Content)}}</text>
										<text class="retime">{{$util.unixDatetime(re_item.CreateTime,'mm-dd')}}</text>
									</view>
								</view>
							</view>
						</block>
					</view>
					<view class="bomtext">{{'- 到底了 -'}}</view>
				</view>
				<view class="kongbox" v-else>
					<image class="kongimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17320823710351082.png"></image>
					<view class="kongtext">还没有评论哦～</view>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
			<view class="inputbotom">
				<view class="inputtext" @click.stop="tocommit(item.ID,0)">{{'说点什么...'}}</view>
				<view class="zan-review">
					<view class="zan" @click.stop="zan(item.ID)">
						<uni-icons type="heart" size="24" color="#999999" v-if="item.IsMyZAN==0"></uni-icons>
						<uni-icons type="heart-filled" size="24" color="#F4290D" v-else></uni-icons>
						{{item.CommunityZAN.length}}
					</view>
					<!-- <view class="zan" @click="open_gift(item)">
						<uni-icons type="gift" size="24" color="#DCC188" v-if="item.IsSendGift==0"></uni-icons>
						<uni-icons type="gift-filled" size="24" color="#DCC188" v-else></uni-icons>
						{{item.Gifts.length}}
					</view> -->
					<view class="zan" @click.stop="tocommit(item.ID,0)">
						<uni-icons type="chatbubble" size="24" color="#9b9b9b"></uni-icons>
						<text>{{item.CommunityComments.length>0?item.CommunityComments.length:''}}</text>
					</view>
					<view class="zan">
						<button hover-class="none" open-type="share">
							<image :src="ossPath + '/upload/1717484310589825.png'"></image>
						</button>
					</view>
					<view class="zan" @click.stop="delFun(item.ID)" v-if="isManager || isMyself">
						<uni-icons type="trash" size="24" color="#9b9b9b"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<block v-else>
			<u-empty mode="list" width="64" height="64"
				icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/community/20230510114106.png" :show="true" iconSize="32"
				text="啊哦,信息没找到,是不是搞错了"></u-empty>
		</block>

		
		<!-- 小红书ID弹窗 -->
		<uni-popup ref="xhspopu" type="center">
			<view class="xhsbox">
				<image  class="xhslogo" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1731404380943728.webp"></image>
				<view class="xhstext">该篇内容来自小红书博主</view>
				<view class="xhstext">请复制ID前往小红书联系</view>
				<view class="xhscent">
					<!-- <view class="xhstitle">小红书ID：</view> -->
					<view class="xhsid">{{item.XHSID?item.XHSID:''}}</view>
					<view class="xhsbtn" @click="idCopy">复制</view>
				</view>
				<view class="xhsclose" @click="onxhsclose">关 闭</view>
			</view>
		</uni-popup>
	
		<inputBox :commit="commit" @submit="submit"></inputBox>

		<uni-popup ref="gift" type="center">
			<view class="x-popup">
				<view class="popup-title">赠送对方礼物
					<view class="xiaoju-popup-close" @click="$refs['gift'].close()">关闭</view>
				</view>
				<scroll-view class="popup-wrap" scroll-y="true" :show-crollbar="true" scroll-with-animation="true">
					<view class="x-list">
						<view v-for="(l,i) in gift" :key="i" @click="gift_active=i" class="list-cell"
							:class="{'list-active':i==gift_active}">
							<image class="list-icon" :src="l.Icon?l.Icon:'/static/img/icon_bbt.png'" mode=""></image>
							<view v-if="i!=gift_active" class="list-name"> {{l.Name}} </view>
							<view class="list-price"> ￥{{l.Price}} </view>
							<!-- <view v-if="i==gift_active" @click="giftEvent" class="list-btn"> 赠送 </view> -->

							<view v-if="i==gift_active" class="list-btn">
								<view class="add" @click="gift_num_reduce(l)">-</view>
								<view class="count">
									<input type="text" v-model="l.Num" />
								</view>
								<view class="add" @click="gift_num_plus(l)">+</view>

							</view>
						</view>
					</view>
				</scroll-view>
				<view class="popup-btn" @click="giftEvent">赠送</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import inputBox from "./components/input-box.vue";
	import topStatus from "@/components/topStatus/topStatus.vue";
	export default {
		components: {
			inputBox,
			topStatus
		},
		data() {
			return {
				commit: false,
				ossPath:'',
				load:false,
				ID: 0,
				user: {},
				item: '',
				shareTitle: "雪遇", //转发的标题
				sharePath: "", //转发的页面
				shareImg: "",

				CompanyID: 6002,
				isMore: true,
				zan_id: 0,
				review_id: 0,
				comment_id: 0,
				review_name:'',

				gift: [], //礼物数组
				gift_active: -1, //当前选中礼物
				
				MyInfo:false,
				isMyself:false,
				isManager:false
			};
		},
		async onLoad(e) {
			
			this.ID = e.id || e.scene;
			this.ossPath = this.$ossPath;
			if (await this.$store.getters.getLoginState) {

				this.init();

			}
		},
		onShow() {
			this.getUserInfo()
			this.getIsCompanyAdmin()
		},
		onShareAppMessage(e) { //发送给朋友
			let o = this.item;
			console.log(o);
			let pid = uni.getStorageSync('user').UserID;

			this.shareTitle = '【滑友圈】发现精彩的雪友动态，赶快来围观吧';
			this.sharePath = 'pages/dynamic/detail?pid=' + pid + '&id=' + this.ID;
			this.shareImg = o.IsVideo == 1 ? JSON.parse(o.Images)[0] + '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto' :
				JSON.parse(o.Images)[0]
			return {
				title: this.shareTitle,
				path: this.sharePath,
				imageUrl: this.shareImg
			}
		},
		methods: {
			closeinp(){
				this.commit = false
			},
			goBack() {
				const pages = getCurrentPages();
				if (pages.length > 1) {
					// 如果页面栈长度大于1，则说明有上一页，可以返回
					uni.navigateBack();
				} else {
					// 如果没有上一页，则导航到首页
					uni.reLaunch({
					url: '/pages/tab/assistant'
					});
				}
			},
			swiperlookimg(url, index, number) {
				let arr = []
				let imgmlist = JSON.parse(url)
				for (let i = 0; i < imgmlist.length; i++) {
					arr.push(imgmlist[i])
				}
				uni.previewImage({
				urls: arr,
				current: index,
				});
			},
			onxhsclose(){
				this.$refs.xhspopu.close();
			},
			idCopy(){
				let _this = this
				uni.setClipboardData({
					data: _this.item.XHSID,
					success: function () {
						_this.$pv.msg('复制成功');
					}
				});
			},
			lookID(){
				if (!this.MyInfo || this.MyInfo.IsAuth == 0) {
					let _this = this;
					uni.showModal({
						title: '温馨提示',
						content: '未注册用户请先注册账号',
						confirmText: "关闭",
						cancelText: "注册账号",
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								});
							} else if (res.cancel) {
								_this.nav_to('/pages/start/start2');
							}
						}
					});
					return
				}
				this.$refs.xhspopu.open();
			},
			async getUserInfo(){
				let u = await this.$api.post('User/GetUserInfo', {
					ID: uni.getStorageSync('user').UserID
				});
				
				this.MyInfo = u.data;
			},
			// 获取礼物列表
			async GetGift() {
				let res = await this.$api.post('Friend/GetGift');
				this.gift = res.data || [];
			},
			open_gift() {
				this.$refs['gift'].open()
			},
			async giftEvent(item) {

				// 当前选中礼物
				const l = this.gift[this.gift_active]

				let res_gift = await this.$api.post('Friend/SendGift', {
					Price: l.Price,
					GiftID: l.ID,
					GiftName: l.Name,
					ToUserID: this.item.UserID,
					EventID: this.item.ID,
					SendType: '球友圈赠送'
				});


				// id=123129&type=0&name=abc
				// 支付请求
				let pres = await this.$api.post('Payment/PayV2', {
					total_fee: l.Price,
					EventType: '赠送礼物',
					EventID: JSON.stringify(res_gift.data),
					body: l.Name,
					SourcePage:'dynamic/detail',
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app"
					// #endif
				});
				// 已余额支付成功
				if (pres.data == 0) {
					// 提示赠送成功
					this.$pv.msg('礼物赠送成功');
					// 关闭礼物弹出层
					this.$refs['gift'].close()

					this.item.IsSendGift = 1;
					this.item.Gifts.push({
						UserID: uni.getStorageSync('user').UserID
					})

					return;
				}

				// 支付成功返回的内容
				let payObj = JSON.parse(pres.data);
				let _this = this;
				// 调用uni支付API
				uni.requestPayment({
					// 服务提供商
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success(res) {

						// 关闭礼物弹出层
						_this.$refs['gift'].close();

						_this.$pv.msg('礼物赠送成功');

						_this.item.IsSendGift = 1;
						_this.item.Gifts.push({
							UserID: _this.user.UserID
						})

					},
					fail(err) {
						_this.$pv.msg('支付失败');
					}
				});
			},
			async getIsCompanyAdmin(){
				let d = await this.$api.post('Company/IsCompanyAdmin');
				if (d.data) this.isManager = true;
			},
			async init() {

				this.user = uni.getStorageSync('user');

				await this.$api.post('/Common/Add_ViewPath', {
					Path: 'dynamic/detail',
					Platform:uni.getStorageSync('platform')
				});

				await this.getDetail();



				await this.GetGift();

			},
			async getDetail() {
				let res = await this.$api.post('Community/Detail', {
					ID: this.ID
				});
				if(res.code == 0){
					this.item = res.data;
					this.review_id = this.item.ID
					this.load = true
					this.isMyself = this.item.UserID == uni.getStorageSync('user').UserID ? true : false
				}
				

			},
			// 赞
			async zan(zid) {
				if (!this.MyInfo || this.MyInfo.IsAuth == 0) {
					let _this = this;
					uni.showModal({
						title: '温馨提示',
						content: '未注册用户请先注册账号',
						confirmText: "关闭",
						cancelText: "注册账号",
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								});
							} else if (res.cancel) {
								_this.nav_to('/pages/start/start2');
							}
						}
					});
					return
				}

				this.zan_id = zid;

				let res = await this.$api.post('Community/ZAN', {
					ID: zid
				});

				if (JSON.stringify(res.data) == 'true') {
					this.$pv.msg('点赞成功');

					this.item.IsMyZAN = 1;
					this.item.CommunityZAN.push({
						HeadImgUrl: uni.getStorageSync('user').HeadImgUrl,
						Name: uni.getStorageSync('user').Name
					})
				} else {
					this.$pv.msg(res.message);
				}
			},
			async delFun(ID) {
				let _this = this;
				// let index = this.dynamicList.findIndex((item) => item.ID === ID)
				uni.showModal({
					title: '温馨提示',
					content: '您确定要删除这条动态吗?',
					confirmText: "删除",
					success: async function(res) {
						if (res.confirm) {
							let res = await _this.$api.post('/Community/Delete', {
								ID: ID
							});
							if(res.code==0){
								_this.$pv.msg('删除成功')
								uni.$emit('updateHome')
								setTimeout(()=>{
									uni.navigateBack()
								},500)
							}
							// _this.dynamicList.splice(index, 1)
						} else if (res.cancel) {
			
						}
					}
				});
			},

			lookimg(url, index) {
				let arr = JSON.parse(url);
				uni.previewImage({
					urls: arr,
					current: index,
				})
			},
			tocommit(ID, C_ID) {
				// console.log(id);
				this.commit = !this.commit
				this.review_id = ID
				this.comment_id = C_ID
			
				//console.log('评论ID', this.review_id);
			},
			async delReview(index, c_index) {
			
				const item = this.item.CommunityComments[c_index];
			
				let res = await this.$api.post('/Community/DeletePage', {
					ID: item.ID,
				});
				this.$pv.msg('删除成功')
			
				this.item.CommunityComments.splice(c_index, 1);
			
			},
			comment_edit(index, c_index, review) {
				
				this.review_name = review.Name
				let _this = this;
				const user = uni.getStorageSync('user');
			
				const item = this.item.CommunityComments[c_index];
			
				if (user.ID == item.UserID) {
					uni.showActionSheet({
						itemList: ['删除评论'],
						success: function(res) {
							if (res.tapIndex == 0) {
								_this.delReview(index, c_index);
			
								return;
							}
						},
						fail: function(res) {
							;
						}
					});
				} else {
					//直接回复
					this.tocommit(item.CommunityID, item.ID);
				}
			
			},
			async submit(val) {
				if (!this.MyInfo || this.MyInfo.IsAuth == 0) {
					let _this = this;
					uni.showModal({
						title: '温馨提示',
						content: '未注册用户请先注册账号',
						confirmText: "关闭",
						cancelText: "注册账号",
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								});
							} else if (res.cancel) {
								_this.nav_to('/pages/start/start2');
							}
						}
					});
					return
				}
				if (val != '') {
					console.log(val);
					let res = await this.$api.post('/Community/UserComment', {
						CommunityID: this.review_id,
						Content: this.$util.utf16ToEntities(val),
						CompanyID: 6003,
						ReplyID: this.comment_id
					});
					console.log(JSON.parse(res.data));
					if (JSON.stringify(res.data) == 'true') {
					
							if (this.item.ID == this.review_id) {
								this.item.CommunityComments.push({
									UserID: uni.getStorageSync('user').UserID,
									HeadImgUrl: uni.getStorageSync('user').HeadImgUrl,
									Name: uni.getStorageSync('user').Name,
									Content: val,
									CreateTime: new Date(),
									ReplyID: this.comment_id,
									Pre_Name:this.review_name
								})
	
							}
							this.commit = false;
							this.init()
					}
				} else {
					this.$pv.msg('评论不能为空')
				}
			}
		}
	}
</script>

<style lang="scss">
button::after {
	border: none;
}
.page_top2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 750rpx;
  box-sizing: border-box;
  transition: 0.3s all;
  z-index: -1;

  .tabsBack {
    height: 44px;
    padding-left: 32rpx;
    display: flex;
    align-items: center;
    z-index: 999;
	.tabimg{
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		margin-left: 16rpx;
	}
    .topTitle {
      padding-left: 20rpx;
      font-weight: bold;
      font-size: 28rpx;
      color: #333333;
    //   width: 300rpx;
    }
		.vipcon{
			margin-left: 12rpx;
			display: flex;
			align-items: center;
			image{
				width: 90rpx;
				height: 40rpx;
			}
		}
    .blackbox {
      width: 52rpx;
      height: 52rpx;
      display: flex;
      align-items: center;
    }

    image {
      width: 24rpx;
      height: 36rpx;
      display: block;
    }
  }
}
.zan-review {
	display: flex;
	align-items: right;

	.zan {
		margin-right: 28rpx;
		display: flex;
		align-items: center;
		&:last-child{
			margin-right: 0;
		}
		button {
			height: 48rpx;
			width: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				height: 48rpx;
				width: 48rpx;
			}
		}
	}
}
.inputbotom{
	display: flex;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 172rpx;
	padding: 0 36rpx;
	box-sizing: border-box;
	border-top: 2rpx solid #E4E4E4;
	background-color: #fff;
	.inputtext{
		width: 336rpx;
		height: 72rpx;
		background: #F6F6F6;
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #666666;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-right: auto;
	}
}
.container {
  width: 100%;
  margin: 20rpx 0 24rpx 0;
  .swiper {
  width: 100%;
  height: 850rpx;

  .bannerImageBox {
    width: 95%;
    height: 850rpx;
    border-radius: 25rpx;
    margin: 0 auto;
    overflow: hidden;

    .adverimg {
      width: 100%;
	  height: 850rpx;
    }
  }
}
}
	.trends {
		.item {
			// margin-bottom: 20rpx;
			margin: 20rpx 0;
			// background: #1c1c1c;
			.sumping{
				font-size: 28rpx;
				color: #666666;
				margin: 32rpx 0;
				padding: 0 32rpx;
			}
			.item_hd {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;

				.left {
					// height: 100rpx;
					display: flex;
					align-items: center;
					margin-right: 20rpx;
				}

				.cover {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					image {
						height: 100%;
						width: 100%;
					}
				}
				.myinput{
					width: 594rpx;
					height: 72rpx;
					background: #F6F6F6;
					border-radius: 36rpx;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #999999;
					padding: 0 32rpx;
					box-sizing: border-box;
				}
			}


			.item_bd {
				.simg {
					// width: 750rpx;
					display: block;
					max-height: 750rpx;
				}
			}
		}
	}

	.add_btn {
		position: fixed;
		right: 32rpx;
		bottom: 70rpx;
		width: 96rpx;
		height: 96rpx;
		z-index: 999;
		text-align: center;
		align-items: center;
		background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
		box-shadow: 0px 4rpx 6rpx 0px rgba(106, 84, 53, 0.4);
		color: #4C310C;
		line-height: 96rpx;
		border-radius: 100rpx;
	}

	.mt40 {
		margin-top: 40rpx;
	}

	.mt20 {
		margin-top: 20rpx;
		margin-bottom: 24rpx;
		.one {
			display: flex;
			width: 100%;
			//height: 480rpx;
		
			image {
				// width: 70%;
				width: 100%;
			}
		}

		.two {
			display: flex;
			justify-content: space-between;

			.two-one {
				width: 40%;
				height: 480rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.two-two {
				width: 59.5%;
				height: 480rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.three {
			display: flex;
			justify-content: space-between;

			.three-one {
				width: 49.5%;
				height: 480rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.three-two {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 49.5%;
				height: 480rpx;

				image {
					width: 100%;
					height: 49.5%;
				}
			}
		}

		.four {
			display: flex;
			flex-direction: column;

			.four-one {
				display: flex;
				justify-content: space-between;

				.four-one-one {
					width: 40%;
					height: 300rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.four-one-two {
					width: 59.5%;
					height: 300rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.four-two {
				display: flex;
				justify-content: space-between;

				.four-two-one {
					width: 59.5%;
					height: 300rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.four-two-two {
					width: 40%;
					height: 300rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.five {
			display: flex;
			flex-wrap: wrap;
			width: 100%;

			.five-one {
				width: 221rpx;
				height: 250rpx;
				margin-bottom: 8rpx;
				margin-right: 4rpx;
				margin-left: 4rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.video_box {
		height: 850rpx;
		position: relative;
		z-index: 2;

		video {
			width: 100%;
			height: 100%;
		}
	}
	.kongbox{
		width: 100%;
		display: flex;
		flex-flow: column;
		align-items: center;
		margin-top: 124rpx;
		.kongimg{
			width: 200rpx;
			height: 200rpx;
		}
		.kongtext{
			font-size: 24rpx;
			color: #999999;
			margin-top: 24rpx;
		}
	}
	.all-list {
		box-sizing: border-box;
		padding: 0 32rpx;
		margin-top: 32rpx;
		.location {
			font-size: 30rpx;
			color: #DCC188;
		}

		.title {
			font-size: 30rpx;
			color: #111;
			line-height: 55rpx;
			font-weight: bold;
		}

		.bomtext{
			font-size: 24rpx;
			color: #666666;
			text-align: center;
			width: 100%;
		}

	}




	.x-popup {
		background-color: #ffffff;
		width: 650rpx;
		border-radius: 20rpx;
		padding-bottom: 20rpx;

		.popup-title {
			padding: 20rpx 0 10rpx;
			text-align: center;
			font-size: 32rpx;
			position: relative;
			color: #333;

			.xiaoju-popup-close {
				font-size: 24rpx;
				position: absolute;
				right: 50rpx;
				top: 10rpx;
				color: #333;
			}
		}

		.popup-wrap {
			max-height: 800rpx;
			min-height: 300rpx;
			padding-top: 10rpx;
			padding-bottom: 30rpx;

			.popup-cell {
				padding: 8rpx 40rpx;
				font-size: 30rpx;
				line-height: 44rpx;
			}
		}

		.popup-btn {
			margin: 0 auto;
			width: 200rpx;
			height: 60rpx;
			border-radius: 10rpx;
			color: #fff;
			font-size: 28rpx;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FD4C61;
		}
	}

	.x-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 0 60rpx;

		.list-cell {
			width: 27%;
			height: 170rpx;
			border: 2rpx solid #fff;
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 5rpx 0rpx 10rpx;
			border-radius: 16rpx;
			position: relative;

			&.list-active {
				border-radius: 16rpx;
				border: 2rpx solid #70737C;
			}

			.list-btn {
				width: calc(100% + 4rpx);
				height: 52rpx;
				color: #fff;
				background: #FD4C61;
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				position: absolute;
				bottom: -2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;


				.count {
					color: #fff;
					line-height: 60rpx !important;
					// margin-right: 5rpx;

					input {
						width: 40rpx;
						//border: #fff solid 1rpx;
					}
				}

				.add {

					display: flex;
					justify-content: center;
					align-items: center;
					/* border: 2rpx solid #ccc; */
					box-sizing: border-box;
					font-size: 52rpx;
					width: 75rpx;
					color: #fff;
				}
			}

			.list-icon {
				width: 80rpx;
				height: 80rpx;
			}

			.list-name {
				color: #333;
				font-size: 26rpx;
				margin-top: 8rpx;
			}

			.list-price {
				color: #333;
				font-size: 22rpx;
				margin-top: 5rpx;
			}
		}
	}
	
	
.review-talk {
	margin-bottom: 56rpx;
	// display: flex;
	// align-items: center;
	.retabox{
		display: flex;
	}
	.rehd{
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.rebox2{
		width: 500rpx;
		.renameBox{
			display: flex;
			align-items: center;
			.rename{
				font-size: 28rpx;
				color: #999999;
			}
			.vipcon{
				margin-left: 12rpx;
				display: flex;
				align-items: center;
				image{
					width: 90rpx;
					height: 40rpx;
				}
			}
		}
		.rename{
			font-size: 28rpx;
			color: #999999;
		}
		.recontenbox{
			// display: flex;
			// align-items: center;
			// height: 40rpx;
			.reconten{
				font-size: 28rpx;
				color: #333333;
			}
			.retime{
				font-size: 24rpx;
				color: #666666;
				margin-left: 8rpx;
				line-height: 40rpx;
			}
		}
	}
	.rebox{
		width: 572rpx;
		.renameBox{
			display: flex;
			align-items: center;
			.rename{
				font-size: 28rpx;
				color: #999999;
			}
			.vipcon{
				margin-left: 12rpx;
				display: flex;
				align-items: center;
				image{
					width: 90rpx;
					height: 40rpx;
				}
			}
		}
		.recontenbox{
			// display: flex;
			// align-items: center;
			// height: 40rpx;
			.reconten{
				font-size: 28rpx;
				color: #333333;
			}
			.retime{
				font-size: 24rpx;
				color: #666666;
				margin-left: 8rpx;
				line-height: 40rpx;
			}
		}
	}
	.repbox{
		display: flex;
    	padding-left: 78rpx;
		box-sizing: border-box;
		margin-top: 26rpx;
	}
}
.fecont{
	font-size: 28rpx;
	color: #333333;
}
.fetime{
	font-size: 24rpx;
	color: #666666;
	// padding: 0 32rpx;
	width: calc(100% - 64rpx);
	margin: 0 auto;
	margin-top: 24rpx;
	height: 56rpx;
	border-bottom: 1rpx solid #e4e4e4;
}
.tipsID{
	padding: 10rpx 32rpx;
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.xhsbox{
	padding: 32rpx;
	background-color: #fff;
	border-radius: 16rpx;
	width: 496rpx;
	// height: 200rpx;
	.xhsclose{
		width: 360rpx;
		height: 72rpx;
		background: #FC341B;
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		margin: 0 auto;
		margin-top: 60rpx;
	}
	.xhslogo{
		width: 168rpx;
		height: 150rpx;
		display: block;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}
	.xhstext{
		font-size: 28rpx;
		text-align: center;
		margin-bottom: 10rpx;
	}
	.xhscent{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		.xhstitle{
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
		}
		.xhsid{
			font-size: 28rpx;
			color: #333333;
		}
		.xhsbtn{
			font-size: 22rpx;
			color: #fff;
			background-color: skyblue;
			margin-left: 20rpx;
			padding: 10rpx 15rpx;

		}
	}
}
</style>